<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Article–Theme Network (Convex Faces)</title>
<style>
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; display:flex; height:100vh; }
#sidebar { width: 460px; border-right: 1px solid #eee; padding: 16px; overflow:auto; }
#viz { flex: 1; position: relative; background: #fafafa; }
.badge { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; }
.node { stroke:#fff; stroke-width:1px; cursor:pointer; }
.theme-face { opacity:.18; stroke-width:1px; cursor:pointer; }
.theme-face:hover { opacity:.28; }
.label { font-size:11px; fill:#111; pointer-events:none; }
.small { font-size:12px; color:#666; }
.statbox { background:#fff; border:1px solid #eee; border-radius:8px; padding:10px; margin-bottom:12px; }
h3 { margin: 10px 0 8px 0; }
hr { border:0; border-top:1px solid #eee; margin:12px 0; }
#themeSearch, #typeSearch { width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:6px; margin-bottom:8px; }
.type-row, .theme-row { margin:4px 0; }
.count-pill { display:inline-block; min-width:22px; text-align:center; background:#eee; border-radius:999px; padding:1px 6px; font-size:11px; margin-left:6px; }
</style>
</head>
<body>

<div id="sidebar">
  <h3>Layers</h3>
  <div>
    <label><input type="checkbox" id="toggleFaces" checked> Show <b>theme faces</b></label><br>
    <label><input type="checkbox" id="toggleLabels" checked> Show <b>article labels</b></label>
  </div>

  <div class="statbox">
    <div><b>Total articles:</b> 86</div>
    <div><b>Total themes:</b> 8</div>
  </div>

  <h3>Filter by Type</h3>
  <input id="typeSearch" placeholder="Search type..."/>
  <div id="typeBox">
<div class="type-row" data-type-row="Critical (risk claims)"><label><input type="checkbox" class="typeCB" checked data-type="Critical (risk claims)"> <span class="badge" style="background:#9ecae1"></span>Critical (risk claims)<span class="count-pill">2</span></label></div>
<div class="type-row" data-type-row="Critical (structural terms)"><label><input type="checkbox" class="typeCB" checked data-type="Critical (structural terms)"> <span class="badge" style="background:#08306b"></span>Critical (structural terms)<span class="count-pill">39</span></label></div>
<div class="type-row" data-type-row="Neutral (Bridging / Middle-Ground)"><label><input type="checkbox" class="typeCB" checked data-type="Neutral (Bridging / Middle-Ground)"> <span class="badge" style="background:#9e9ac8"></span>Neutral (Bridging / Middle-Ground)<span class="count-pill">8</span></label></div>
<div class="type-row" data-type-row="Neutral (Operational / Governance-Focused)"><label><input type="checkbox" class="typeCB" checked data-type="Neutral (Operational / Governance-Focused)"> <span class="badge" style="background:#4a1486"></span>Neutral (Operational / Governance-Focused)<span class="count-pill">19</span></label></div>
<div class="type-row" data-type-row="Pro-GMO (Regulatory emphasis)"><label><input type="checkbox" class="typeCB" checked data-type="Pro-GMO (Regulatory emphasis)"> <span class="badge" style="background:#7f2704"></span>Pro-GMO (Regulatory emphasis)<span class="count-pill">14</span></label></div>
<div class="type-row" data-type-row="Pro-GMO (Technologically and Economically)"><label><input type="checkbox" class="typeCB" checked data-type="Pro-GMO (Technologically and Economically)"> <span class="badge" style="background:#fd8d3c"></span>Pro-GMO (Technologically and Economically)<span class="count-pill">4</span></label></div>

  </div>

  <h3>Filter by Theme</h3>
  <input id="themeSearch" placeholder="Search theme..."/>
  <div id="themes"></div>
  <p class="small">Hover over a polygon to highlight its articles. Click to isolate a theme.</p>
</div>

<div id="viz">
<svg id="svg" width="1200" height="800">
  <g id="faces">
<polygon class="theme-face" id="face-Social Participation, Resistance, and Conflict" points="576.1,243.0 613.6,431.9 799.8,493.1 934.7,494.3 1104.0,416.5 1090.7,341.6 1062.1,207.1 988.5,149.2 853.4,88.5 687.2,71.1 592.5,84.9 578.0,123.1" fill="#a6cee3" stroke="#a6cee3" data-theme="Social Participation, Resistance, and Conflict" data-count="17"></polygon>
<polygon class="theme-face" id="face-Biosafety and Risk Assessment" points="263.4,253.3 102.4,507.7 117.4,583.1 156.5,595.4" fill="#1f78b4" stroke="#1f78b4" data-theme="Biosafety and Risk Assessment" data-count="4"></polygon>
<polygon class="theme-face" id="face-Ethics, Justice, and Rights" points="625.5,80.1 810.2,320.5 754.2,83.9" fill="#b2df8a" stroke="#b2df8a" data-theme="Ethics, Justice, and Rights" data-count="3"></polygon>
<polygon class="theme-face" id="face-Governance and Regulation" points="138.8,410.7 135.4,492.2 247.9,664.8 338.9,705.6 437.1,725.7 646.6,736.0 753.0,687.6 825.3,646.4 894.3,561.2 883.6,388.0 656.8,249.3 470.0,233.2 354.2,269.7 242.4,332.5" fill="#33a02c" stroke="#33a02c" data-theme="Governance and Regulation" data-count="41"></polygon>
<polygon class="theme-face" id="face-Political Economy and Intellectual Property" points="723.5,546.5 188.8,279.4 147.3,285.0 96.0,463.0 104.0,540.5 122.0,565.6 288.8,676.3 370.5,701.6 495.1,709.2" fill="#fb9a99" stroke="#fb9a99" data-theme="Political Economy and Intellectual Property" data-count="10"></polygon>
<polygon class="theme-face" id="face-Labeling, Traceability, and Monitoring" points="366.2,319.2 1098.2,357.7 1078.8,238.8 892.9,105.4 721.4,64.0" fill="#e31a1c" stroke="#e31a1c" data-theme="Labeling, Traceability, and Monitoring" data-count="7"></polygon>
<polygon class="theme-face" id="face-Methodology and State of the Art" points="171.8,453.3 754.2,723.9 721.8,666.4" fill="#fdbf6f" stroke="#fdbf6f" data-theme="Methodology and State of the Art" data-count="3"></polygon>
<polygon class="theme-face" id="face-Innovation and New Techniques" points="671.6,394.8 719.6,394.8 719.6,362.8 671.6,362.8" fill="#ff7f00" stroke="#ff7f00" data-theme="Innovation and New Techniques" data-count="1"></polygon>
  </g>
  <g id="links">
<line x1="687.2" y1="71.1" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="799.8" y1="493.1" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1062.1" y1="207.1" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="578.0" y1="123.1" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="576.1" y1="243.0" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="592.5" y1="84.9" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="934.7" y1="494.3" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="613.6" y1="431.9" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="986.7" y1="200.3" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1090.7" y1="341.6" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1059.9" y1="318.0" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1040.0" y1="393.1" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1104.0" y1="416.5" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="853.4" y1="88.5" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="738.8" y1="429.8" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="870.8" y1="155.0" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="988.5" y1="149.2" x2="857.5" y2="273.0" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="156.5" y1="595.4" x2="159.9" y2="484.9" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="263.4" y1="253.3" x2="159.9" y2="484.9" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="117.4" y1="583.1" x2="159.9" y2="484.9" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="102.4" y1="507.7" x2="159.9" y2="484.9" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="625.5" y1="80.1" x2="730.0" y2="161.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="810.2" y1="320.5" x2="730.0" y2="161.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="754.2" y1="83.9" x2="730.0" y2="161.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="845.9" y1="603.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="368.6" y1="623.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="504.4" y1="269.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="369.7" y1="415.1" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="636.5" y1="686.1" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="354.2" y1="269.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="679.3" y1="548.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="258.2" y1="475.8" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="242.4" y1="332.5" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="589.6" y1="719.1" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="135.4" y1="492.2" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="422.1" y1="665.3" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="829.0" y1="538.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="224.1" y1="384.5" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="807.5" y1="388.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="437.1" y1="725.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="285.5" y1="377.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="726.7" y1="395.6" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="320.8" y1="572.2" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="437.3" y1="280.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="247.9" y1="664.8" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="656.8" y1="249.3" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="751.8" y1="626.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="883.6" y1="388.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="629.8" y1="336.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="470.0" y1="233.2" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="894.3" y1="561.2" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="598.4" y1="637.4" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="338.9" y1="705.6" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="753.1" y1="480.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="386.7" y1="304.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="508.6" y1="354.3" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="276.7" y1="625.9" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="138.8" y1="410.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="646.6" y1="736.0" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="537.3" y1="677.8" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="753.0" y1="687.6" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="825.3" y1="646.4" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="484.0" y1="724.3" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="407.4" y1="373.5" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="849.3" y1="423.7" x2="524.7" y2="502.7" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="207.4" y1="413.5" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="495.1" y1="709.2" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="288.8" y1="676.3" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="122.0" y1="565.6" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="188.8" y1="279.4" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="370.5" y1="701.6" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="104.0" y1="540.5" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="723.5" y1="546.5" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="96.0" y1="463.0" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="147.3" y1="285.0" x2="274.3" y2="518.1" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1078.8" y1="238.8" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="721.4" y1="64.0" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="918.9" y1="143.5" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="641.4" y1="247.0" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="892.9" y1="105.4" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="366.2" y1="319.2" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="1098.2" y1="357.7" x2="816.8" y2="210.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="754.2" y1="723.9" x2="549.3" y2="614.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="171.8" y1="453.3" x2="549.3" y2="614.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="721.8" y1="666.4" x2="549.3" y2="614.5" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
<line x1="695.6" y1="378.8" x2="695.6" y2="378.8" stroke="#ccc" stroke-opacity=".25" stroke-width="1"></line>
  </g>
  <g id="nodes">
<circle class="node" r="8" cx="687.2" cy="71.1" fill="#08306b" data-id="#22" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="697.2" y="74.1">#22</text>
<circle class="node" r="8" cx="156.5" cy="595.4" fill="#4a1486" data-id="#24" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Biosafety and Risk Assessment"]'></circle>
<text class="label" x="166.5" y="598.4">#24</text>
<circle class="node" r="8" cx="625.5" cy="80.1" fill="#08306b" data-id="#25" data-type="Critical (structural terms)" data-themes='["Ethics, Justice, and Rights"]'></circle>
<text class="label" x="635.5" y="83.1">#25</text>
<circle class="node" r="8" cx="845.9" cy="603.7" fill="#9e9ac8" data-id="#31" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="855.9" y="606.7">#31</text>
<circle class="node" r="8" cx="207.4" cy="413.5" fill="#08306b" data-id="#33" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="217.4" y="416.5">#33</text>
<circle class="node" r="8" cx="799.8" cy="493.1" fill="#08306b" data-id="#34" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="809.8" y="496.1">#34</text>
<circle class="node" r="8" cx="368.6" cy="623.0" fill="#08306b" data-id="#35" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="378.6" y="626.0">#35</text>
<circle class="node" r="8" cx="504.4" cy="269.9" fill="#9e9ac8" data-id="#36" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="514.4" y="272.9">#36</text>
<circle class="node" r="8" cx="369.7" cy="415.1" fill="#08306b" data-id="#37" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="379.7" y="418.1">#37</text>
<circle class="node" r="8" cx="495.1" cy="709.2" fill="#08306b" data-id="#38" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="505.1" y="712.2">#38</text>
<circle class="node" r="8" cx="636.5" cy="686.1" fill="#08306b" data-id="#44" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="646.5" y="689.1">#44</text>
<circle class="node" r="8" cx="354.2" cy="269.7" fill="#08306b" data-id="#45" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="364.2" y="272.7">#45</text>
<circle class="node" r="8" cx="1062.1" cy="207.1" fill="#08306b" data-id="#46" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="1072.1" y="210.1">#46</text>
<circle class="node" r="8" cx="288.8" cy="676.3" fill="#9ecae1" data-id="#58" data-type="Critical (risk claims)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="298.8" y="679.3">#58</text>
<circle class="node" r="8" cx="679.3" cy="548.0" fill="#08306b" data-id="#59" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="689.3" y="551.0">#59</text>
<circle class="node" r="8" cx="258.2" cy="475.8" fill="#7f2704" data-id="#62" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="268.2" y="478.8">#62</text>
<circle class="node" r="8" cx="242.4" cy="332.5" fill="#08306b" data-id="#67" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="252.4" y="335.5">#67</text>
<circle class="node" r="8" cx="578.0" cy="123.1" fill="#08306b" data-id="#69" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="588.0" y="126.1">#69</text>
<circle class="node" r="8" cx="263.4" cy="253.3" fill="#7f2704" data-id="#74" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Biosafety and Risk Assessment"]'></circle>
<text class="label" x="273.4" y="256.3">#74</text>
<circle class="node" r="8" cx="589.6" cy="719.1" fill="#08306b" data-id="#78" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="599.6" y="722.1">#78</text>
<circle class="node" r="8" cx="1078.8" cy="238.8" fill="#9e9ac8" data-id="#81" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="1088.8" y="241.8">#81</text>
<circle class="node" r="8" cx="721.4" cy="64.0" fill="#9e9ac8" data-id="#83" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="731.4" y="67.0">#83</text>
<circle class="node" r="8" cx="122.0" cy="565.6" fill="#7f2704" data-id="#85" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="132.0" y="568.6">#85</text>
<circle class="node" r="8" cx="135.4" cy="492.2" fill="#08306b" data-id="#90" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="145.4" y="495.2">#90</text>
<circle class="node" r="8" cx="422.1" cy="665.3" fill="#08306b" data-id="#91" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="432.1" y="668.3">#91</text>
<circle class="node" r="8" cx="829.0" cy="538.7" fill="#08306b" data-id="#101" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="839.0" y="541.7">#101</text>
<circle class="node" r="8" cx="576.1" cy="243.0" fill="#08306b" data-id="#104" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="586.1" y="246.0">#104</text>
<circle class="node" r="8" cx="188.8" cy="279.4" fill="#fd8d3c" data-id="#105" data-type="Pro-GMO (Technologically and Economically)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="198.8" y="282.4">#105</text>
<circle class="node" r="8" cx="592.5" cy="84.9" fill="#08306b" data-id="#106" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="602.5" y="87.9">#106</text>
<circle class="node" r="8" cx="934.7" cy="494.3" fill="#08306b" data-id="#107" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="944.7" y="497.3">#107</text>
<circle class="node" r="8" cx="224.1" cy="384.5" fill="#7f2704" data-id="#111" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="234.1" y="387.5">#111</text>
<circle class="node" r="8" cx="918.9" cy="143.5" fill="#fd8d3c" data-id="#115" data-type="Pro-GMO (Technologically and Economically)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="928.9" y="146.5">#115</text>
<circle class="node" r="8" cx="754.2" cy="723.9" fill="#4a1486" data-id="#116" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Methodology and State of the Art"]'></circle>
<text class="label" x="764.2" y="726.9">#116</text>
<circle class="node" r="8" cx="807.5" cy="388.0" fill="#4a1486" data-id="#117" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="817.5" y="391.0">#117</text>
<circle class="node" r="8" cx="437.1" cy="725.7" fill="#08306b" data-id="#134" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="447.1" y="728.7">#134</text>
<circle class="node" r="8" cx="613.6" cy="431.9" fill="#08306b" data-id="#135" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="623.6" y="434.9">#135</text>
<circle class="node" r="8" cx="986.7" cy="200.3" fill="#08306b" data-id="#136" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="996.7" y="203.3">#136</text>
<circle class="node" r="8" cx="1090.7" cy="341.6" fill="#08306b" data-id="#137" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="1100.7" y="344.6">#137</text>
<circle class="node" r="8" cx="285.5" cy="377.9" fill="#08306b" data-id="#143" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="295.5" y="380.9">#143</text>
<circle class="node" r="8" cx="726.7" cy="395.6" fill="#08306b" data-id="#144" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="736.7" y="398.6">#144</text>
<circle class="node" r="8" cx="1059.9" cy="318.0" fill="#08306b" data-id="#146" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="1069.9" y="321.0">#146</text>
<circle class="node" r="8" cx="1040.0" cy="393.1" fill="#9e9ac8" data-id="#148" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="1050.0" y="396.1">#148</text>
<circle class="node" r="8" cx="117.4" cy="583.1" fill="#9e9ac8" data-id="#150" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Biosafety and Risk Assessment"]'></circle>
<text class="label" x="127.4" y="586.1">#150</text>
<circle class="node" r="8" cx="171.8" cy="453.3" fill="#4a1486" data-id="#158" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Methodology and State of the Art"]'></circle>
<text class="label" x="181.8" y="456.3">#158</text>
<circle class="node" r="8" cx="320.8" cy="572.2" fill="#4a1486" data-id="#162" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="330.8" y="575.2">#162</text>
<circle class="node" r="8" cx="1104.0" cy="416.5" fill="#08306b" data-id="#171" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="1114.0" y="419.5">#171</text>
<circle class="node" r="8" cx="437.3" cy="280.9" fill="#08306b" data-id="#173" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="447.3" y="283.9">#173</text>
<circle class="node" r="8" cx="247.9" cy="664.8" fill="#9e9ac8" data-id="#174" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="257.9" y="667.8">#174</text>
<circle class="node" r="8" cx="695.6" cy="378.8" fill="#fd8d3c" data-id="#176" data-type="Pro-GMO (Technologically and Economically)" data-themes='["Innovation and New Techniques"]'></circle>
<text class="label" x="705.6" y="381.8">#176</text>
<circle class="node" r="8" cx="656.8" cy="249.3" fill="#08306b" data-id="#179" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="666.8" y="252.3">#179</text>
<circle class="node" r="8" cx="751.8" cy="626.9" fill="#08306b" data-id="#186" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="761.8" y="629.9">#186</text>
<circle class="node" r="8" cx="883.6" cy="388.0" fill="#08306b" data-id="#188" data-type="Critical (structural terms)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="893.6" y="391.0">#188</text>
<circle class="node" r="8" cx="853.4" cy="88.5" fill="#08306b" data-id="#192" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="863.4" y="91.5">#192</text>
<circle class="node" r="8" cx="370.5" cy="701.6" fill="#08306b" data-id="#193" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="380.5" y="704.6">#193</text>
<circle class="node" r="8" cx="641.4" cy="247.0" fill="#4a1486" data-id="#194" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="651.4" y="250.0">#194</text>
<circle class="node" r="8" cx="892.9" cy="105.4" fill="#4a1486" data-id="#195" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="902.9" y="108.4">#195</text>
<circle class="node" r="8" cx="366.2" cy="319.2" fill="#4a1486" data-id="#196" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="376.2" y="322.2">#196</text>
<circle class="node" r="8" cx="738.8" cy="429.8" fill="#08306b" data-id="#197" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="748.8" y="432.8">#197</text>
<circle class="node" r="8" cx="102.4" cy="507.7" fill="#7f2704" data-id="#198" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Biosafety and Risk Assessment"]'></circle>
<text class="label" x="112.4" y="510.7">#198</text>
<circle class="node" r="8" cx="1098.2" cy="357.7" fill="#4a1486" data-id="#206" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Labeling, Traceability, and Monitoring"]'></circle>
<text class="label" x="1108.2" y="360.7">#206</text>
<circle class="node" r="8" cx="629.8" cy="336.0" fill="#7f2704" data-id="#208" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="639.8" y="339.0">#208</text>
<circle class="node" r="8" cx="470.0" cy="233.2" fill="#7f2704" data-id="#210" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="480.0" y="236.2">#210</text>
<circle class="node" r="8" cx="894.3" cy="561.2" fill="#7f2704" data-id="#212" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="904.3" y="564.2">#212</text>
<circle class="node" r="8" cx="598.4" cy="637.4" fill="#7f2704" data-id="#213" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="608.4" y="640.4">#213</text>
<circle class="node" r="8" cx="338.9" cy="705.6" fill="#4a1486" data-id="#217" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="348.9" y="708.6">#217</text>
<circle class="node" r="8" cx="753.1" cy="480.9" fill="#4a1486" data-id="#218" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="763.1" y="483.9">#218</text>
<circle class="node" r="8" cx="104.0" cy="540.5" fill="#08306b" data-id="#237" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="114.0" y="543.5">#237</text>
<circle class="node" r="8" cx="723.5" cy="546.5" fill="#9ecae1" data-id="#238" data-type="Critical (risk claims)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="733.5" y="549.5">#238</text>
<circle class="node" r="8" cx="96.0" cy="463.0" fill="#08306b" data-id="#239" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="106.0" y="466.0">#239</text>
<circle class="node" r="8" cx="810.2" cy="320.5" fill="#4a1486" data-id="#241" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Ethics, Justice, and Rights"]'></circle>
<text class="label" x="820.2" y="323.5">#241</text>
<circle class="node" r="8" cx="754.2" cy="83.9" fill="#4a1486" data-id="#242" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Ethics, Justice, and Rights"]'></circle>
<text class="label" x="764.2" y="86.9">#242</text>
<circle class="node" r="8" cx="386.7" cy="304.7" fill="#7f2704" data-id="#248" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="396.7" y="307.7">#248</text>
<circle class="node" r="8" cx="508.6" cy="354.3" fill="#7f2704" data-id="#252" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="518.6" y="357.3">#252</text>
<circle class="node" r="8" cx="870.8" cy="155.0" fill="#9e9ac8" data-id="#256" data-type="Neutral (Bridging / Middle-Ground)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="880.8" y="158.0">#256</text>
<circle class="node" r="8" cx="147.3" cy="285.0" fill="#08306b" data-id="#259" data-type="Critical (structural terms)" data-themes='["Political Economy and Intellectual Property"]'></circle>
<text class="label" x="157.3" y="288.0">#259</text>
<circle class="node" r="8" cx="276.7" cy="625.9" fill="#4a1486" data-id="#260" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="286.7" y="628.9">#260</text>
<circle class="node" r="8" cx="138.8" cy="410.7" fill="#7f2704" data-id="#272" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="148.8" y="413.7">#272</text>
<circle class="node" r="8" cx="646.6" cy="736.0" fill="#4a1486" data-id="#291" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="656.6" y="739.0">#291</text>
<circle class="node" r="8" cx="537.3" cy="677.8" fill="#4a1486" data-id="#299" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="547.3" y="680.8">#299</text>
<circle class="node" r="8" cx="753.0" cy="687.6" fill="#7f2704" data-id="#300" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="763.0" y="690.6">#300</text>
<circle class="node" r="8" cx="721.8" cy="666.4" fill="#4a1486" data-id="#307" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Methodology and State of the Art"]'></circle>
<text class="label" x="731.8" y="669.4">#307</text>
<circle class="node" r="8" cx="825.3" cy="646.4" fill="#fd8d3c" data-id="#314" data-type="Pro-GMO (Technologically and Economically)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="835.3" y="649.4">#314</text>
<circle class="node" r="8" cx="484.0" cy="724.3" fill="#7f2704" data-id="#315" data-type="Pro-GMO (Regulatory emphasis)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="494.0" y="727.3">#315</text>
<circle class="node" r="8" cx="988.5" cy="149.2" fill="#08306b" data-id="#316" data-type="Critical (structural terms)" data-themes='["Social Participation, Resistance, and Conflict"]'></circle>
<text class="label" x="998.5" y="152.2">#316</text>
<circle class="node" r="8" cx="407.4" cy="373.5" fill="#4a1486" data-id="#321" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="417.4" y="376.5">#321</text>
<circle class="node" r="8" cx="849.3" cy="423.7" fill="#4a1486" data-id="#334" data-type="Neutral (Operational / Governance-Focused)" data-themes='["Governance and Regulation"]'></circle>
<text class="label" x="859.3" y="426.7">#334</text>
  </g>
</svg>
</div>

<script>
const faces      = document.querySelectorAll('.theme-face');
const nodes      = document.querySelectorAll('.node');
const labels     = document.querySelectorAll('.label');
const themesDiv  = document.getElementById('themes');
const themeSearch= document.getElementById('themeSearch');
const typeSearch = document.getElementById('typeSearch');
const toggleFaces= document.getElementById('toggleFaces');
const toggleLabels = document.getElementById('toggleLabels');

// --- Preenche lista de temas no sidebar ---
faces.forEach(face => {
  const theme = face.dataset.theme;
  const count = face.dataset.count;
  const color = face.getAttribute('fill');
  const row = document.createElement('div');
  row.className = 'theme-row';
  row.setAttribute('data-theme-row', theme);
  row.innerHTML =
    '<label><input type="checkbox" class="themeCB" checked data-theme="'+theme+'"> ' +
    '<span class="badge" style="background:'+color+'"></span>' +
    theme +
    ' <span class="count-pill">'+count+'</span></label>';
  themesDiv.appendChild(row);
});

// --- Filtro por Theme (checkbox) ---
themesDiv.addEventListener('change', (e) => {
  const cb = e.target.closest('.themeCB');
  if (!cb) return;
  const theme = cb.dataset.theme;
  const face  = document.getElementById('face-'+theme);
  if (face) face.style.display = cb.checked ? '' : 'none';
});

// --- Busca por Theme (apenas lista no sidebar) ---
themeSearch.addEventListener('input', () => {
  const q = themeSearch.value.toLowerCase();
  document.querySelectorAll('.theme-row').forEach(row => {
    const theme = row.getAttribute('data-theme-row').toLowerCase();
    row.style.display = theme.includes(q) ? '' : 'none';
  });
});

// --- Busca por Type (apenas lista no sidebar) ---
typeSearch.addEventListener('input', () => {
  const q = typeSearch.value.toLowerCase();
  document.querySelectorAll('.type-row').forEach(row => {
    const t = row.getAttribute('data-type-row').toLowerCase();
    row.style.display = t.includes(q) ? '' : 'none';
  });
});

// --- Filtro por Type (checkbox) ---
function applyTypeFilter() {
  const activeTypes = Array.from(document.querySelectorAll('.typeCB'))
    .filter(cb => cb.checked)
    .map(cb => cb.dataset.type);

  nodes.forEach(node => {
    const t = node.dataset.type;
    const visible = activeTypes.includes(t);
    node.style.display = visible ? '' : 'none';

    // rótulo correspondente
    const id = node.getAttribute('data-id');
    const label = Array.from(labels).find(l => l.textContent === id);
    if (label) label.style.display = visible ? '' : 'none';
  });
}

document.querySelectorAll('.typeCB').forEach(cb => {
  cb.addEventListener('change', applyTypeFilter);
});

// --- Toggles globais ---
toggleFaces.addEventListener('change', e => {
  document.getElementById('faces').style.display = e.target.checked ? '' : 'none';
});

toggleLabels.addEventListener('change', e => {
  labels.forEach(l => { l.style.display = e.target.checked ? '' : 'none'; });
});

// --- Highlight por Theme (hover nas faces) ---
faces.forEach(face => {
  face.addEventListener('mouseenter', () => {
    const theme = face.dataset.theme;
    nodes.forEach(n => {
      const themes = JSON.parse(n.dataset.themes);
      n.style.opacity = themes.includes(theme) ? '1' : '0.2';
    });
  });
  face.addEventListener('mouseleave', () => {
    nodes.forEach(n => { n.style.opacity = '1'; });
  });
});

// aplica filtro de Type na carga inicial
applyTypeFilter();
</script>

</body>
</html>